<template>
    <view class="container">
        <view @click="navigateTo('pages/lottery/index', {activityId: item.id})" class="info" v-for="(item, k) in activityList" :key="k">
            <view class="info-image">
                <image
                    :src="item.banner"
                    class="image"
                ></image>
                <view :class="item.open? 'end-tag':'tag'"></view>
            </view>
            <view class="name">本期奖品“{{ item.title }}”</view>
            <view :class="item.open? 'desc-end':'desc'" >抽奖时间：{{ item.createAt }} - {{ item.endAt }}</view>
        </view>
    </view>
</template>

<script>
    import { getActivityPages } from "@/config/api"
    export default {
        name: "index",
        data() {
            return {
                listQuery: {
                    page: 1,
                    list_rows: 10
                },
                activityList: [],
                total: 0
            }
        },
        onLoad() {
            this.getData()
        },
        methods: {
            async getData() {
                const res = await getActivityPages(this.listQuery)
                this.activityList = res.items
                this.total = res.total
            },
            navigateTo(path, params={}, type='navigateTo') {
                uni.$u.route({
                    url: path,
                    params,
                    type
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        box-sizing: border-box;
        padding: 44rpx 0;
        width: 100%;
        background: #FAFAFA;
        .info {
            margin: 0 20rpx;
            background: #FFFFFF;
            box-shadow: 0 4rpx 25rpx 0 rgba(224, 224, 224, 0.5);
            border-radius: 18rpx;
            padding: 16rpx;
            margin-bottom: 50rpx;
            .info-image {
                height: 230rpx;
                position: relative;
                .image {
                    width: 100%;
                    height: 230rpx;
                }
                .tag {
                    background: url("https://img.ionepin.com/baa03f9f1e4949306380dd556a6777a0536c0996.png") no-repeat;
                    background-size: 100% 100%;
                    width: 120rpx;
                    height: 44rpx;
                    position: absolute;
                    top: 0;
                    right: 0;
                    z-index: 999;
                }
                .end-tag {
                    background: url("https://img.ionepin.com/dac05051f3fa7262d1267d781e525e1518afe6fd.png") no-repeat;
                    background-size: 100% 100%;
                    width: 120rpx;
                    height: 44rpx;
                    position: absolute;
                    top: 0;
                    right: 0;
                    z-index: 999;
                }
            }
            .name {
                font-size: 30rpx;
                font-weight: 400;
                color: #000000;
                padding: 0 10rpx;
                margin-top: 24rpx;
            }
            .desc {
                font-size: 22rpx;
                font-weight: 400;
                color: #356CE7;
                margin-top: 26rpx;
                margin-bottom: 20rpx;
                padding: 0 10rpx;
            }
            .desc-end {
                color: #999999;
                font-size: 22rpx;
                font-weight: 400;
                margin-top: 26rpx;
                margin-bottom: 20rpx;
                padding: 0 10rpx;
            }
        }
    }
</style>
